<template>
  <div class="main">
    <van-sticky>
      <div class="nav">
        <img :src="back" alt="" @click="handleBack"/>
        <div>订单详情</div>
      </div>
    </van-sticky>
    <div class="body">
      <div class="one">
        <!--        <div class="one-top yzf" v-if="obj.status==1">-->
        <!--          <img :src="yzf"/>-->
        <!--          <div class="dzf">已支付</div>-->
        <!--        </div>-->
        <div class="one-top" v-if="obj.status==1">
          <img :src="dfh"/>
          <div class="dzf">待发货</div>
        </div>
        <div class="one-top" v-if="obj.status==8">
          <img :src="ygb"/>
          <div class="dzf">已关闭</div>
        </div>
        <div class="one-top" v-if="obj.status== 2">
          <img :src="yfh"/>
          <div class="dzf">已发货</div>
        </div>
        <div class="one-top" v-if="obj.status == 9">
          <img :src="ywc"/>
          <div class="dzf">已完成</div>
        </div>
        <div class="one-top yqx" v-if="obj.status==7">
          <img :src="yqx"/>
          <div class="dzf">已取消</div>
        </div>
        <div class="one-top" v-if="obj.status == 4">
          <img :src="tkz"/>
          <div class="dzf">退款中</div>
        </div>
        <div class="one-top" v-if="obj.status == 5">
          <img :src="tkcg"/>
          <div class="dzf">退款成功</div>
        </div>
        <div class="one-top yqx" v-if="obj.status == 6">
          <img :src="tksb"/>
          <div class="dzf">退款失败</div>
          <img :src="sb" style="margin-left: auto"/>
        </div>
        <div class="one-bottom">
          <div class="one-bottom-top">
            <img :src="address"/>
            <div class="name">{{ obj.recName }}</div>
            <div class="tel">{{ obj.recPhone }}</div>
            <div class="btn" v-if="obj.status==1" @click="gotoEditAddress">修改</div>
          </div>
          <div class="one-bottom-db">{{ obj.recAddress }}</div>
        </div>
      </div>
      <div class="two">
        <div class="content-desc">
          <!--          <img :src="kf"/>-->
          <img :src="store.state.imgUrl+obj.picture"/>
          <div class="content-desc-r">
            <div class="desc">{{ obj.name }}</div>
            <div class="desc-second" v-if="obj.sku">{{ Object.values(JSON.parse(obj.sku)).join('/') }}</div>
            <div class="content-desc-price">
              <div class="sj"><span>￥</span>{{ obj.price }}</div>
              <!--            <div class="yj">原价：￥399.00</div>-->
              <div class="add-reduce">
                × {{ obj.num }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="three">
        <div class="three-item">
          <div class="name">商品金额</div>
          <div class="price">￥{{ obj.payPrice }}</div>
        </div>
        <div class="three-item">
          <div class="name">运费</div>
          <div class="price">￥{{ obj.freight }}</div>
        </div>
        <div class="br"></div>
        <div class="all-price">已支付:{{ obj.payPrice }}</div>
      </div>
      <div class="four">
        <div class="title">订单信息</div>
        <div class="four-body">
          <div class="four-body-item" v-if="obj.orderCode">
            <div class="name">订单编号</div>
            <div class="content">{{ obj.orderCode }}</div>
          </div>
          <div class="four-body-item" v-if="obj.createTime">
            <div class="name">订单时间</div>
            <div class="content">{{ obj.createTime }}</div>
          </div>
          <div class="four-body-item" v-if="obj.payStyle">
            <div class="name">付款方式</div>
            <div class="content">{{ obj.payStyle == '0' ? '微信' : '支付宝' }}</div>
            <!--              payStyle  0 ：微信 1：支付宝-->
          </div>
          <div class="four-body-item" v-if="obj.DeliveryStyle">
            <div class="name">配送</div>
            <div class="content">{{ obj.DeliveryStyle == '0' ? '快递运输' : '门店自取' }}</div>
          </div>
          <div class="four-body-item" v-if="obj.deliveryName">
            <div class="name">快递公司</div>
            <div class="content">{{ obj.deliveryName }}</div>
          </div>
          <div class="four-body-item" v-if="obj.deliveryCode">
            <div class="name">快递单号</div>
            <div class="content">{{ obj.deliveryCode }}</div>
          </div>
          <div class="four-body-item" v-if="obj.note">
            <div class="name">订单留言</div>
            <div class="content">{{ obj.note }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getOrderDetail} from "../../../api/shopping";
import store from '../../../store'

export default {
  name: "orderDetail",
  data() {
    return {
      store: store,
      address: require("@/assets/shopping/address.png"),
      back: require("@/assets/my/back.png"),
      yzf: require('@/assets/shopping/payStatus/success.png'),
      dfh: require('@/assets/shopping/payStatus/dfh.png'),
      yfh: require('@/assets/shopping/payStatus/yfh.png'),
      ywc: require('@/assets/shopping/payStatus/ywc.png'),
      yqx: require('@/assets/shopping/payStatus/yqx.png'),
      tkz: require('@/assets/shopping/payStatus/tkz.png'),
      tkcg: require('@/assets/shopping/payStatus/tkcg.png'),
      tksb: require('@/assets/shopping/payStatus/tksb.png'),
      kf: require('@/assets/my/lxkf.png'),
      sb: require('@/assets/shopping/payStatus/sb.png'),
      ygb: require('@/assets/shopping/payStatus/ygb.png'),
      obj: {}
    }
  },
  mounted() {
    let id = this.$route.query.id
    this.getOrderDetail(id)
  },
  methods: {
    gotoEditAddress() {
      //跳转地址编辑页面
      this.$router.push({
        path: '/addressManagement',
        query: {from: 'orderDetail', id: this.obj.id, detailId: this.obj.detailId}
      })
    },
    handleBack() {
      // this.$router.go(-1);
      this.$router.push({path:'/order'})
    },
    getOrderDetail(id) {
      let data = {
        id: id
      }
      console.log('打印订单详情接口参数', data)
      getOrderDetail(data).then(res => {
        this.obj = res.data
        console.log('--------订单详情数据------', this.obj)

      })
    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;

  .nav {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;

    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
  }

  .body {
    background: rgba(242, 242, 242, 1);

    .one {
      background: #ffffff;

      .yzf {
        background: rgba(47, 186, 47, 1) !important;
      }

      .yqx {
        background: rgba(255, 0, 0, 1) !important;
      }

      .one-top {
        padding: 10px;
        margin: 0px 10px;
        height: 74px;
        opacity: 1;
        border-radius: 4px;
        background: rgba(242, 150, 0, 1);
        display: flex;
        align-items: center;
        justify-content: flex-start;

        > img {
          width: 40.52px;
          height: 40.25px;
        }

        .dzf {
          margin-left: 5px;
          font-size: 24px;
          font-weight: 400;
          line-height: 34.75px;
          color: rgba(255, 255, 255, 1);
        }

        .dzf-desc {
          font-size: 18px;
          font-weight: 700;
          line-height: 26.06px;
          color: rgba(255, 255, 255, 1);
          margin-left: auto;
        }
      }

      .one-bottom {
        padding: 10px;

        .one-bottom-top {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          > img {
            width: 14.43px;
            height: 14.53px;
          }

          .name {
            margin-left: 3px;
            font-size: 16px;
            font-weight: 400;
            color: rgba(84, 84, 84, 1);
          }

          .tel {
            font-size: 17px;
            font-weight: 400;
            color: rgba(199, 199, 199, 1);
          }

          .btn {
            margin-left: auto;
            width: 66px;
            height: 25px;
            opacity: 1;
            border-radius: 7px;
            background: rgba(242, 150, 0, 1);
            font-size: 16px;
            font-weight: 500;
            //line-height: 23.17px;
            color: rgba(255, 255, 255, 1);
            //text-align: center;
            //vertical-align: top;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .one-bottom-db {
          font-size: 14px;
          font-weight: 400;
          line-height: 20.27px;
          color: rgba(84, 84, 84, 1);
          text-align: left;
          vertical-align: top;
        }
      }

    }

    .two {
      margin-top: 10px;
      background: #ffffff;

      .content-desc {
        padding: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        //border-bottom: 0.5px solid rgba(229, 229, 229, 1);
        > img {
          width: 118px;
          height: 118px;
        }

        .content-desc-r {
          margin-left: 12px;
          width: 230px;

          .desc {
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 23.17px;
            color: rgba(29, 22, 23, 1);
            text-overflow: ellipsis;
            overflow: hidden;
            display: inline-block;
            white-space: nowrap;
            max-width: 236px;
          }

          .desc-second {
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 24px;
            color: rgba(199, 199, 199, 1);
            text-overflow: ellipsis;
            overflow: hidden;
            display: inline-block;
            white-space: nowrap;
            max-width: 236px;
          }

          .content-desc-price {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .sj {
              font-size: 28px;
              font-weight: 500;
              letter-spacing: 0px;
              line-height: 40.54px;
              color: rgba(255, 0, 0, 1);

              > span {
                font-size: 16px;
                font-weight: 500;
              }
            }

            .add-reduce {
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .yj {
              font-size: 14px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 20.27px;
              color: rgba(166, 166, 166, 1);
              text-align: center;
              vertical-align: top;
            }
          }
        }
      }
    }

    .three {
      margin-top: 10px;
      background: #ffffff;
      padding: 10px;

      .three-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        .name {
          font-size: 15px;
          font-weight: 400;
          line-height: 24px;
          color: rgba(84, 84, 84, 1);
        }

        .price {
          font-size: 15px;
          font-weight: 400;
          line-height: 24px;
          color: rgba(84, 84, 84, 1);
        }
      }

      .br {
        border: 0.45px solid rgba(229, 229, 229, 1);
      }

      .all-price {
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(255, 90, 90, 1);
        text-align: right;
        margin-top: 20px;
      }

    }

    .four {
      margin-top: 10px;
      margin-bottom: 60px;
      background: #ffffff;
      padding: 10px;

      .title {
        font-size: 16px;
        font-weight: 500;
        line-height: 23.17px;
        color: rgba(29, 22, 23, 1);
        text-align: left;
      }

      .four-body {
        margin-top: 10px;

        .four-body-item {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .name {
            font-size: 15px;
            font-weight: 400;
            line-height: 24px;
            color: rgba(84, 84, 84, 1);
            text-align: left;
          }

          .content {
            font-size: 15px;
            font-weight: 400;
            line-height: 24px;
            color: rgba(84, 84, 84, 1);
            text-align: left;
          }
        }
      }
    }
  }
}
</style>
